<template>
  <div>
    &nbsp;
    <el-form
      :inline="true"
      :model="PerformanceVoQuery"
      class="demo-form-inline"
    >
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item label="年限">
        <el-date-picker
          v-model="PerformanceVoQuery.yearIdea"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          format="yyyy"
          :picker-options="pickerOptions01"
        >
        </el-date-picker>
      </el-form-item>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item label="季度">
        <el-select
          v-model="PerformanceVoQuery.quarter"
          placeholder="请选择季度"
        >
          <el-option label="第一季度" value="1"></el-option>
          <el-option label="第二季度" value="2"></el-option>
          <el-option label="第三季度" value="3"></el-option>
          <el-option label="第四季度" value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="PerformanceVoQuery.sector" placeholder="请选择">
          <el-option
            v-for="sector in sectorList"
            :key="sector.sectorid"
            :label="sector.sector"
            :value="sector.sectorid"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      &nbsp; &nbsp; &nbsp; &nbsp;
      <el-form-item>
        <el-button type="primary" @click="reseDdta">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table align="center" :data="list" style="width: 90%">
      <el-table-column align="center" prop="name" label="姓名" width="100">
      </el-table-column>
      <el-table-column label="工作理念" align="center">
         <el-table-column align="center" prop="yearIdea" label="年份" width="120">
        </el-table-column>
         <el-table-column align="center" prop="quarter" label="季度" width="150"  :formatter="stateFormat1">
        </el-table-column>
        <el-table-column align="center" prop="avgIdea" label="得分" width="120">
        </el-table-column>
        <el-table-column align="center" prop="gpaIdea" label="绩点" width="120">
        </el-table-column>
      </el-table-column>

      <el-table-column label="工作能力" align="center">
                 <el-table-column align="center" prop="yearScarce" label="年份" width="120">
        </el-table-column>
         <el-table-column align="center" prop="quarterScarce" label="季度" width="150"  :formatter="stateFormat">
        </el-table-column>
        <el-table-column
          align="center"
          prop="avgBility"
          label="得分"
          width="120"
         
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="gpaBility"
          label="绩点"
          width="120"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="sumGpa" label="总绩点">
      </el-table-column>
    </el-table>
  <div class="bbb">
    <el-pagination
      background
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-aling: center; float: right"
      layout="total,prev,pager,next,jumper"
      @current-change="getList"
    />
    </div>
  </div>
</template>
<script>
import sectorApi from "@/api/hr/sector";
import performanceApi from "@/api/hr/performance";
export default {
  data() {
    return {
     
   pickerOptions01: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      list: [],
      page: 1,
      limit: 5,
      total: 0,
      PerformanceVoQuery: {
        quarter: "",
        yearIdea: "",
        sector: "",
      },
      sectorList: [],
    };
  },
  created() {
    this.getSeclist();
    this.getList();
  },

  methods: {
    getList(page = 1) {
      this.page = page;
      performanceApi
        .getPerListPage(this.page, this.limit, this.PerformanceVoQuery)
        .then((response) => {
        
          this.list = response.data.rows;
          console.log(this.list);
          this.total = response.data.total;
         
        })
        .catch((error) => {});
    },
    onSubmit() {
      performanceApi
        .getPerListPage(1, this.limit, this.PerformanceVoQuery)
        .then((res) => {
          console.log(res);
          this.page = 1;
          this.list = res.data.rows;
          this.total = res.data.total;
          
        });
    },
    reseDdta() {
      this.PerformanceVoQuery = {};
      this.getList();
    },
    stateFormat(row, column) {
      if (row.quarterScarce === 1) {
        return "第一季度";
      }
      if (row.quarterScarce === 2) {
        return "第二季度";
      }
      if (row.quarterScarce === 3) {
        return "第三季度";
      }
      if (row.quarterScarce === 4) {
        return "第四季度";
      } else {
        return "";
      }
    },
    stateFormat1(row, column) {
      if (row.quarter === 1) {
        return "第一季度";
      }
      if (row.quarter === 2) {
        return "第二季度";
      }
      if (row.quarter === 3) {
        return "第三季度";
      }
      if (row.quarter === 4) {
        return "第四季度";
      } else {
        return "";
      }
    },

    getSeclist() {
      sectorApi.getSeclist().then((response) => {
        this.sectorList = response.data.sectorList;
      });
    },
  },
};

</script>
<style scoped>
div.bbb {
    padding: 30px 150px;
    float: right;
}
</style>